<template>
    <div class="login-box">
        <h2>叩丁狼商品管理系统</h2>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <el-form-item prop="username">
                <el-input class="w-50 m-2" placeholder="请输入账号" :prefix-icon="Avatar" size="large"
                    v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input class="w-50 m-2" placeholder="请输入密码" :prefix-icon="Lock" size="large"
                    v-model="ruleForm.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { Avatar, Lock } from '@element-plus/icons-vue'
import { user } from "@/api"
import { useRouter } from 'vue-router';
import { userStore } from '@/store';

const useStore = userStore()

const router = useRouter()

const ruleFormRef = ref<FormInstance>()

// 自定义的规则是一个函数，  rule - 规则 ； value - 输入框的值， callback - 回调函数
const validatePass = (rule: any, value: string, callback: any) => {
    if (value === '') {
        // 校验不成功，需要在callback里面传入一个错误对象
        callback(new Error('请输入密码！'))
    } else {
        // 若校验通过，直接调用callback
        callback()
    }
}

const ruleForm = reactive({
    username: 'admin',
    password: '123456',
})

const rules = reactive({
    username: [
        // 非空校验
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        // 控制输入框的输入长度 在min和max之间
        // { min: 3, max: 5, message: '用户名长度在3~12字符之间', trigger: 'blur' },
    ],
    password: [{ validator: validatePass, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        // valid 是一个布尔值，表示表单是否满足 rules 的规则
        if (!valid) {
            return false
        }

        // 向服务器发起请求
        user.LoginAPI(ruleForm).then(res => {
            if (res.code === 200) {
                console.log(res);

                // 表示登录成功
                // 存储tokenHead + token
                localStorage.setItem('token', res.data.tokenHead + res.data.token)
                // 弹出成功提示
                // ElMessage({
                //     message: 'Congrats, this is a success message.',
                //     type: 'success',
                // })
                // 简写方法
                ElMessage.success('登录成功，进入首页！')
                // 跳转到首页
                router.push("/index")

                // 登录成功后，需要请求用户的菜单数据
                user.userInfoApi().then((res) => {
                    if (res.code === 200) {
                        // 得到了该用户所有的菜单数据等等
                        // 把数据存到 pinia
                        // console.log(res.data);
                        useStore.menus = res.data.menus
                    }
                });
            }
        })
    })
}
</script>

<style lang="less" scoped>
.login-box {
    width: 350px;
    margin: 300px auto;
    text-align: center;

    .el-input {
        height: 40px;
        font-size: 16px;
    }

    .el-button {
        width: 100%;
        height: 40px;
    }

    :deep(.el-input__wrapper) {
        background-color: #283443;
    }

    :deep(.el-input__inner) {
        color: #fff;

    }
}
</style>